<template>
  <div class="knowledgeList">
    <el-row>
      <div style="padding: 10px;background-color: #f0f0f0;">
        <el-dropdown style="margin-right: 15px">
          <el-button plain size="small"><i style='color:#11A983;margin-right: 10px ' class="el-icon-circle-plus-outline"></i>新建<i class="el-icon-arrow-down el-icon--right"></i></el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>html文档 </el-dropdown-item>
            <el-dropdown-item>word文档</el-dropdown-item>
            <el-dropdown-item>Excel文档</el-dropdown-item>
            <el-dropdown-item>Wps文档</el-dropdown-item>
            <el-dropdown-item>Wps表格</el-dropdown-item>
            <el-dropdown-item>文档夹</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown style="margin-right: 15px">
          <el-button plain size="small"><i style='color:#11A983;margin-right: 10px ' class="el-icon-upload2"></i>上传<i class="el-icon-arrow-down el-icon--right"></i></el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>上传文件</el-dropdown-item>
            <el-dropdown-item>上传音视频</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown style="margin-right: 15px">
          <el-button plain size="small"><i style='color:#11A983;margin-right: 10px ' class="el-icon-s-promotion"></i>发送到<i class="el-icon-arrow-down el-icon--right"></i></el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>常用文档</el-dropdown-item>
            <el-dropdown-item>个人学习文档</el-dropdown-item>
            <el-dropdown-item>指定位置</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button plain size="small" ><i style='color:#11A983;margin-right: 10px ' class="el-icon-s-cooperation"></i>移动</el-button>
        <el-button plain size="small" style="margin-right: 15px"><i style='color:#11A983;margin-right: 10px ' class="el-icon-delete-solid"></i>删除</el-button>
        <el-dropdown>
          <el-button plain size="small"><i style='color:#11A983;margin-right: 10px ' class="el-icon-star-on"></i>高级<i class="el-icon-arrow-down el-icon--right"></i></el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>文档排序</el-dropdown-item>
            <el-dropdown-item>批量下载</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-row>
    <el-row>
      <div>
        <div style="margin: 15px 5px;display: flex;justify-content: space-between; align-items: center">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">项目文档</el-breadcrumb-item>
            <el-breadcrumb-item>苗木栽培</el-breadcrumb-item>
          </el-breadcrumb>
          <div style="width: 25%">
            <el-row>
              <el-col :span="20">
                <el-input placeholder="请输入内容" v-model="searchInput" class="input-with-select">
                  <el-select v-model="selectSearch" slot="prepend" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                  <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </el-col>
              <el-col :span="4">
                <el-button plain size="small" style="float: right">高级</el-button>
              </el-col>
            </el-row>
          </div>
        </div>
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          :header-cell-style="{backgroundColor: '#e7f6f3'}">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="type" label="类型"></el-table-column>
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column prop="contentType" label="内容类型" ></el-table-column>
          <el-table-column prop="area" label="所属区域"></el-table-column>
          <el-table-column prop="size" label="大小" ></el-table-column>
          <el-table-column prop="actor" label="创建人" ></el-table-column>
          <el-table-column prop="updateTime" label="修改时间"></el-table-column>
          <el-table-column prop="actime" label="创建时间" ></el-table-column>
          <el-table-column prop="read" label="阅读" ></el-table-column>
          <el-table-column prop="review" label="评论"></el-table-column>
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize" style="margin: 0 25px 28px;"/>
      </div>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "knowledgeList",
  data(){
    return{
      tableData:[
        {type:'word',name:'进度安排.doc',contentType:'文档',size:'74KB',actor:"王XX",updateTime:'2024-03-01',actime:'2023-10-12',read:'9',review:'0'},
        {type:'word',name:'实施主计划.doc',contentType:'文档',size:'100KB',actor:"王XX",updateTime:'',actime:'2023-10-12',read:'4',review:'0'},
        {type:'word',name:'解决方案.doc',contentType:'文档',size:'74KB',actor:"王XX",updateTime:'2024-03-01',actime:'2023-10-12',read:'4',review:'0'},
        {type:'word',name:'进度报告.doc',contentType:'文档',size:'27.5KB',actor:"王XX",updateTime:'2024-03-01',actime:'2023-10-12',read:'7',review:'0'},
        {type:'Excel',name:'项目投入明细.xls',contentType:'文档',size:'74KB',actor:"王XX",updateTime:'2024-03-01',actime:'2023-10-12',read:'6',review:'0'},
        {type:'word',name:'项目章程.doc',contentType:'文档',size:'74KB',actor:"王XX",updateTime:'2024-03-01',actime:'2023-10-12',read:'4',review:'0'},
        {type:'word',name:'测试报告.doc',contentType:'文档',size:'74KB',actor:"王XX",updateTime:'',actime:'2023-10-12',read:'4',review:'0'},
        {type:'Excel',name:'巡林任务安排.xls',contentType:'文档',size:'74KB',actor:"王XX",updateTime:'2024-03-01',actime:'2023-10-12',read:'10',review:'0'},
      ],
      selectSearch:'1',
      options:[
        {label:'名称',value:"1"},
        {label:'内容类型',value:"2"},
        {label:'关键字',value:"3"},
        {label:'创建时间',value:"4"},
        {label:'创建人',value:"5"},
        {label:'发起人',value:"6"},
        {label:'发起日期',value:"7"},
      ],
      searchInput:'',
      total:0,
      queryParams:{
        pageNum:1,
        pageSize:10
      }
    }
  },
  mounted() {
    this.total = this.tableData.length
  },
  methods:{
    handleSelectionChange(){

    }
  }
}
</script>

<style scoped lang="scss">
.knowledgeList ::v-deep .el-input-group__prepend {
  width: 120px;
}
</style>
